<template>
  <el-card class="sales-container">
    <template #header>
      <div class="sales">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="销售额" name="sales" />
          <el-tab-pane label="访问量" name="visit" />
        </el-tabs>

        <div>
          <span class="sales-btn" @click="setToday">今日</span>
          <span class="sales-btn" @click="setWeek">本周</span>
          <span class="sales-btn" @click="setMonth">本月</span>
          <span class="sales-btn" @click="setYear">本年</span>

          <el-date-picker
            v-model="date"
            size="small"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
      </div>
    </template>

    <Trend :activeTab="activeTab" />
  </el-card>
</template>

<script>
import dayjs from 'dayjs' // npm i dayjs
import Trend from './components/Trend.vue'

export default {
  name: 'Sales',
  components: {
    Trend
  },
  data() {
    return {
      activeTab: 'sales',
      date: ''
    }
  },
  methods: {
    setToday() {
      // moment dayjs date-fns
      // const date = dayjs().format('YYYY-MM-DD HH:mm:ss')
      // dayjs() 得到当前的时间
      // format 将当前的时间进行格式化
      const date = dayjs().format('YYYY-MM-DD')

      this.date = [date, date]
    },
    setWeek() {
      const start = dayjs().day(1).format('YYYY-MM-DD')
      const end = dayjs().day(7).format('YYYY-MM-DD')

      this.date = [start, end]
    },
    setMonth() {
      const start = dayjs().startOf('month').format('YYYY-MM-DD')
      const end = dayjs().endOf('month').format('YYYY-MM-DD')

      this.date = [start, end]
    },
    setYear() {
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')

      this.date = [start, end]
    }
  }
}
</script>

<style scoped>
/*
  加上scoped，
    可以让样式只对当前组件生效
    自动移除没有使用的样式

  组件内如果直接修改element-ui组件的样式，当前组件并没有相应的类名，
  组件会认为这些类名多余，会自动移除

  深度样式选择器：>>>
    选择当前组件的后代组件的样式进行修改

  总结：
    如果需要在当前组件修改其他组件的样式
    1. 不要写lang="less" lang="sass" scoped
      纯css不会移除任何样式，可以直接生效
      缺点：类名如果重名，会影响其他组件样式

    2. 加上lang="less" lang="sass" scoped
    需要使用深度样式选择器，子组件的类名才不会被移除
*/
.sales {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sales-container >>> .el-card__header {
  padding: 10px 15px 0;
}
.sales-container >>> .el-tabs__item {
  font-size: 20px;
}
.sales-container >>> .el-tabs__active-bar,
.sales-container >>> .el-tabs__nav-wrap::after {
  display: none;
}
.sales-container >>> .el-tabs__header {
  margin: 0;
}
.sales-btn {
  margin-right: 20px;
  cursor: pointer;
}
</style>
